<template>
  <div class="search">
    <div class="bar-wrapper">
      <search-bar @inputchange="inputChange" @confirmsearch="addHistory"></search-bar>
    </div>
    <div class="hot-search">
      <h1 class="title">热门搜索</h1>
      <ul class="tags">
        <li class="tag-item" v-for="hot in hots" :key="hot.n">
          <span class="search-tag" @click.stop="goSearch(hot.k)">{{hot.k}}</span>
        </li>
      </ul>
    </div>
    <div class="history-wrapper">
      <search-history
              @remove="removeHistory"
              @removeall="removeAll"
              @selecthistory="selectRecord">
      </search-history>
      <confirm @confirm="toConfirm" v-if="confirm"></confirm>
    </div>
    <div class="list-warpper" v-show="query">
      <search-list @select="selectSong" @changehistory="changeHistory"></search-list>
    </div>
  </div>
</template>

<script>
  import SearchBar from "@/components/search-bar/SearchBar";
  import SearchHistory from "@/components/search-history/SearchHistory";
  import {getHotKey} from "@/api/search";
  import SearchList from "@/components/search-list/SearchList";
  import Confirm from "@/base/confirm/Confirm";
  import {searchOptions, selectOptions} from "@/common/js/mixin";
  import {method} from "@/config/mode-config/config";

  export default {
        name: "Search",
        components: {Confirm, SearchList, SearchHistory, SearchBar},
        mixins: [searchOptions,selectOptions],
        data(){
            return {
                hots: [],
                search: []
            }
        },
        mounted(){
            this._getHotKey()
            this.setFlag(method.addAll)
        },
        methods: {
           async _getHotKey(){
             this.hots = (await getHotKey()).slice(0,10)
            }
        }
    }
</script>

<style scoped lang="stylus">
@import "~common/stylus/variable"
  .search
    width 90%
    height 100%
    margin 0 auto
    overflow hidden
    .bar-wrapper
      height 44px
      margin-top 10px
    .hot-search
      margin-top 2rem
      .title
        font-size $font-size-medium-x
        color $color-text-ll
        margin-bottom 1rem
      .tags
        display flex
        flex-wrap wrap
        .tag-item
          margin-right 10px
          margin-bottom 6px
          .search-tag
            padding 8px
            background $color-highlight-background
            color $color-text-l
            font-size $font-size-medium-x
            display inline-block
            box-sizing border-box

    .history-wrapper
      margin-top 2rem
    .list-warpper
      position fixed
      top 140px
      bottom 60px
      left 5%
      right 5%
      background $color-highlight-background
</style>
